<template>
  <div class="fd-nav-content">
    <section class="flow-design">
      <div class="zoom">
        <!-- <div
          class="zoom-out"
          :class="nowVal == 50 && 'disabled'"
          @click="save"
        ></div> -->
        <div
          class="zoom-out"
          :class="nowVal == 50 && 'disabled'"
          @click="zoomSize(1)"
        ></div>
        <span>{{ nowVal }}%</span>
        <div
          class="zoom-in"
          :class="nowVal == 300 && 'disabled'"
          @click="zoomSize(2)"
        ></div>
      </div>
      <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
        <TreeItem
          v-model:nodeConfig="props.nodeConfig"
          v-model:flowPermission="props.flowPermission"
          @addNode="addNode"
          @delNode="delNode"
        />
        <div class="end-node">
          <div class="end-node-circle"></div>
          <div class="end-node-text">流程结束</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import type { FlowPanelPoint, FlowTree } from '@/apis/flowPanelPoint/type';
import { reactive, ref, onMounted } from 'vue';
import TreeItem from './treeItem.vue';
import { delFlowPanelPointByIds } from '@/apis/flowPanelPoint';

const props = withDefaults(
  defineProps<{
    nodeConfig?: FlowTree;
    flowPermission?: any;
  }>(),
  {
    nodeConfig: () => ({}),
    flowPermission: () => ({})
  }
);
let emits = defineEmits(['addNode', 'delNode']);
const addNode = (data: FlowPanelPoint) => {
  emits('addNode', data);
};
let nowVal = ref(100);
const zoomSize = (type: number) => {
  if (type === 1 && nowVal.value !== 50) {
    nowVal.value -= 10;
  } else if (nowVal.value !== 300) {
    nowVal.value += 10;
  }
};
/**
 * 删除流程节点
 * @param conditionId 流程id
 * @param changePoints 流程节点
 */
const delNode = async (conditionId: number, changePoints: FlowPanelPoint[]) => {
  emits('delNode', conditionId, changePoints);
  await delFlowPanelPointByIds({ ids: [conditionId] });
  // 删除节点后，改变大于此节点的优先级（全部减一）
};
</script>

<style lang="less">
@import url('@/components/approval/css/workflow.less');
.fd-nav-content {
  // height: 800px;
  overflow: auto;
}
</style>
